<html>
    <head>
        <title>事件 和 按键修饰符</title>
    </head>
    <body>
        <script>
            // 3、事件 & 按键修饰符
                                            /*
                                                对于 .parent 、 .capture 和 .once 这些事件修饰符， Vue 提供了相应的前缀可以用于 on:

                                                以下是对照表:

                                                    修饰符                 前缀
                                                    .passive               &
                                                    .capture               !
                                                    .once                  ~
                                                    .capture.once          ~!
                                                    或者 
                                                    .once.caputre
                                            */
                                            // 例如：
                                            on:{
                                                        '!click':this.doThisInCapturingMode,
                                                        '~keyup':this.doThisOnce,
                                                        '~!mouseover':this.doThisOnceInCapturingMode
                                            }
                                        
                                            // 对于所有其他的修饰符，私有前缀都不是必须的，因为你可以在时间处理函数中使用 "JS的事件方法"：
                                            /*
                                                    修饰符                                   处理函数中的等价操作
                                                    .stop                                   event.stopPropagation()  阻止事件冒泡
                                                    .prevent                                event.preventDefault()   阻止默认行为
                                                    .self                                   if(event.target !== event.currentTarget) return  只当事件在该元素本身触发时才触发回调
                                                    
                                                    按键：
                                                    .enter , .13                            if(!event.ctrKey) return （对于别的按键修饰符来说，可以将13改为另一个按键码）
                                                    
                                                    修饰键：
                                                    .ctrl ， .alt, .shift, .meta            if(!event.ctrlKey) return （将 ctrlKey 分别修改为 altKey、shiftKey 或者 metaKey）
                                            */      
                                            
                                            // 这里是一个实用所有修饰符的例子：
                                                on: {
                                                        keyup: function (event) {
                                                            // 如果触发事件的元素不是事件绑定的元素
                                                            // 则返回
                                                            if (event.target !== event.currentTarget) return
                                                            // 如果按下去的不是 enter 键或者
                                                            // 没有同时按下 shift 键
                                                            // 则返回
                                                            if (!event.shiftKey || event.keyCode !== 13) return
                                                            // 阻止 事件冒泡
                                                            event.stopPropagation()
                                                            // 阻止该元素默认的 keyup 事件
                                                            event.preventDefault()
                                                            // ...
                                                        }
                                                }
        </script>
    </body>
</html>